<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title>首页</title>
	</head>
	<body>
		<div class="header-wrap">
			<div class="header">
				<div class="img-wrap">
					<img class="logo" src="img/logo.png" >
				</div>
				<div class="nav" style="display: inline-block;">
					<div class="fl inline active"><a class="nav-l" href="index.html">Home</a></div>
					<div class="fl inline"><a class="nav-l" href="">About</a></div>
					<div class="fl inline"><a class="nav-l" href="portfoll.html">Portfoll</a></div>
					<div class="fl inline"><a class="nav-l" href="features.html">Features</a></div>
					<div class="fl inline"><a class="nav-l" href="blog.html">Blog</a></div>
					<div class="fl inline"><a class="nav-l" href="contact.html">Contact</a></div>
				</div>
				<div class="nav-img-wrap" style="display: inline-block;margin-left: 50px;">
					<img src="img/s-icons_03.jpg" alt="">
					<img src="img/s-icons_05.jpg" alt="">
					<img src="img/s-icons_07.jpg" alt="">
					<img src="img/s-icons_09.jpg" alt="">
					<img src="img/s-icons_11.jpg" alt="">
					<img src="img/s-icons_13.jpg" alt="">
				</div>
			</div>
		</div>
		<div class="ad-wrap">
			<div class="ad-img-wrap">
				<img class="nav-img1" src="img/banner_l_03.png" />
				<img class="nav-img2" src="img/slide1.png" >
			</div>
		</div>
		<div class="main1">
			<div class="main1-1">
				<div class="fl main1-1-1">
					<img class="img-1 fl" src="img/index_06.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">EVENTS PLANNING</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
				<div class="fl main1-1-1 margin">
					<img class="img-1 fl" src="img/index_08.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">MASTERING DESIGN</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
				<div class="fl main1-1-1 margin">
					<img class="img-1 fl" src="img/index_10.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">EXPERT DEVELOPERS</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
			<div class="main1-1" style="margin-top: 25px;">
				<div class="fl main1-1-1">
					<img class="img-1 fl" src="img/index_15.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">ATTENSION TO DETAILS</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
				<div class="fl main1-1-1 margin">
					<img class="img-1 fl" src="img/index_16.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">ANOTHER COOL SERVICE.</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
				<div class="fl main1-1-1 margin">
					<img class="img-1 fl" src="img/index_17.jpg" />
					<div class="text">
						<h4 style="margin-top: 25px;">EVENTS PLANNING</h4>
						<div class="text-1">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main2">
			<div class="main2-1">
				<div class="title-wrap">
					<div>
						HI THERE. I AM A THEME, WITH ATTITUDE. I AM ALSO RESPONSIVE, EASY DO EDIT. WHY DON'T YOU TRY ME ?
					</div>
					<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</div>
				</div>
				<div class="btn-wrap">
					<img style="height: 100%; display: inline-block; vertical-align: middle;" src="img/windows.png" />
					<span class="" style="height: 100%; line-height: 100%;vertical-align: middle;">BUY NOW !</span>
				</div>
			</div>
		</div>
		<div class="other2">
			<div style="line-height: 30px; height: 30px;text-align: center; display: inline-block;vertical-align: middle;">
				THE PORTFOLIO
			</div>
			<div class="other2-1">
				<div class="other2-1-1"></div>
			</div>
		</div>
		<div class="main3">
			<div class="fl main3-1 margin2">
				<img src="img/p1.jpg" />
				<div class="title">I AM AN AMAZING PROJECT</div>
				<div class="title-des">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. Quisque<br> quis nulla amet. turpis.</div>
			</div>
			<div class="fl main3-1 margin2">
				<img src="img/p2.jpg" />
				<div class="title">I AM AN AMAZING PROJECT</div>
				<div class="title-des">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. Quisque<br> quis nulla amet. turpis.</div>
			</div>
			<div class="fl main3-1 margin2">
				<img src="img/p3.jpg" />
				<div class="title">I AM AN AMAZING PROJECT</div>
				<div class="title-des">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. Quisque<br> quis nulla amet. turpis.</div>
			</div>
			<div class="fl main3-1 margin2">
				<img src="img/p4.jpg" />
				<div class="title">I AM AN AMAZING PROJECT</div>
				<div class="title-des">Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit. Quisque<br> quis nulla amet. turpis.</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="other3"></div>
		<div class="main4">
			<div class="main4-1">
				<div>SUBSCRIBE TO OUR NEWSLETTER. WE HATE SPAM AS MUCH AS YOU DO, SO NO WORRIES.</div>
				<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</div>
			</div>
			<div class="main4-2"></div>
			<div class="main4-3">
				<img src="img/mail.png" >
			</div>
		</div>
		<div class="other2">
			<div style="line-height: 30px; height: 30px;text-align: center; display: inline-block;vertical-align: middle;">
				OUR BLOGGY
			</div>
			<div class="other2-1" style="width: 630px;float: none;">
				<div class="other2-1-1"></div>
			</div>
			&nbsp;&nbsp;&nbsp;
			<div style="line-height: 30px; height: 30px;text-align: center; display: inline-block;vertical-align: middle;">
				TESTIMONIALS
			</div>
			<div class="other2-1" style="width: 240px; float: none;">
				<div class="other2-1-1"></div>
			</div>
		</div>
		<div class="main5">
			<div class="main5-1">
				<div class="main5-1-1">
					<div></div>
					<div>JUST A COOL BLOG POST TITLE HERE.</div>
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
				<div class="main5-1-2">
					<div></div>
					<div>JUST A COOL BLOG POST TITLE HERE.</div>
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
			</div>
			<div class="main5-2">
				<div class="mian5-2-1">
					<img class="main5-img" src="img/t1.jpg" >
					<div class="main5-2-1-1">
						<div>VERY PLEASED WITH THE COOL SERVICES PROVIDED.</div>
						<div>Linda Scott / Webdesigner</div>
						<div>http://www.mywebsite.com</div>
					</div>
				</div>
				<div style="margin-bottom: 5px; color: #A3A3A3;"><span style="color: red;font-size: 25px;">“&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.</div>
				<div class="mian5-2-1">
					<img class="main5-img" src="img/p3.jpg" >
					<div class="main5-2-1-1">
						<div>VERY PLEASED WITH THE COOL SERVICES PROVIDED.</div>
						<div>Linda Scott / Webdesigner</div>
						<div>http://www.mywebsite.com</div>
					</div>
				</div>
				<div style="margin-bottom: 5px;color: #A3A3A3;"><span style="color: red;font-size: 25px;">“&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.</div>
			</div>
		</div>
		<div class="main6-wrap">
			<div class="main6">
				<div class="main6-1">
					<div>ABOUT STUDEON</div><br><hr style="width: 100px; border: 1px solid black;">
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
				</div>
				<div class="main6-1">
					<div>THE TAGS</div><br><hr style="width: 100px; border: 1px solid black;">
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
				</div>
				<div class="main6-1">
					<div>LATEST TWEETS</div><br><hr style="width: 100px; border: 1px solid black;">
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</div>
				</div>
				<div class="main6-1">
					<div>FLICKR FEED</div><br><hr style="width: 100px; border: 1px solid black;">
					<div class="main6-1-1">
						<img src="img/f1.png" >
						<img src="img/f2.png" >
						<img src="img/f3.png" >
						<img src="img/f4.png" >
						<img src="img/f1.png" >
						<img src="img/f2.png" >
					</div>
				</div>
			</div>
		</div>
		<div class="main7-wrap">
			<div class="main7">
				<div>
					<img style="height: 25px;" src="img/logo2.png" >
				</div>
				<div>
					Copyright &copy; 2015 All rights Reserved | Template by &nbsp;<span style="color: red;">W3layouts</span>
				</div>
			</div>
		</div>
	</body>
</html>